<template>
    <div class="Balance">
      <header>
        <div class="h-s">
          <span><router-link to="/Mine"><i></i>我的</router-link></span>
          <span>余额</span>
          <span><router-link to="/Detailed">明细</router-link> </span>
        </div>
        <p class="b-p">
          余额账户 (元)
        </p>
        <p class="p-2" id="numb1">
          3,943.58
        </p>
      </header>
      <section class="m-s">
        <ul>
          <li v-for="item in its">
            <p class="art_list_left">
              <router-link v-bind:to="item.bal"><img v-bind:src="item.url"><span>{{item.text}}</span></router-link>
            </p>
            <p class="art_list_right"><span>{{item.msg}}</span><span></span></p>
          </li>
        </ul>
      </section>
      <p class="b-bottom">
        <span><a href="">信用借款</a></span>
        <span></span>
        <span><a href="">常见问题</a></span>
      </p>
    </div>
</template>

<script>
    export default {
        name: "Balance",
      data () {
        return {
          its: [
            {
              bal:"/Recharge",
              url: "../../static/img/balance_03.jpg",
              text: "充值",
            }, {
              bal:"/Put",
              url: "../../static/img/balance_06.jpg",
              text: "提现",
            }, {
              bal:"/Balance",
              url: "../../static/img/balance_08.jpg",
              text: "分集宝",
            }
          ]
        }
      },
    //   methods:{
    //     var oNum1=document.getElementById('numb1');
    // var timer=null;
    // function timers(el,tar,time) {
    //   timer = setInterval(function(){
    //     var speeds =  (tar-parseInt(el.innerHTML))/10;
    //
    //     speeds=speeds>0 ? Math.ceil(speeds) : Math.floor(speeds);
    //     if(parseInt(el) >= tar){
    //       clearInterval(timer);
    //     }else {
    //       el.innerHTML=parseInt(parseInt(el.innerHTML)+speeds);
    //       console.log(el);
    //     }
    //   },time);
    // };
    // timers(oNum1,203040,10);
    // }
    };


</script>

<style scoped>
  header{
    background: #0e80d8;
  }
  .h-s{
    padding: .8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 1rem;
  }
  .h-s span:nth-child(1) a{
    color: #fff;
  }
  .h-s span:nth-child(2) {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bolder;
    margin-right: .5rem;
  }
  .h-s span i{
    display: inline-block;
    width: 1rem;
    height: 2rem;
    vertical-align: middle;
  }
  .h-s span:nth-child(1) i{
    background: url(../../static/img/back.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    margin-right: .5rem;
    width: 0.6rem;
    height: 1.1rem;
    vertical-align: middle;
  }
  .h-s span:nth-child(3) i{
    width: 2rem;
    height: .8rem;
  }
  .h-s span:nth-child(3) a{
    color: white;
  }
  .b-p{
    width: 100%;
    padding: 1.5rem 0;
    color: gainsboro;
    font-size: .9rem;
    text-indent: 1rem;
  }
  .p-2{
    width: 100%;
    padding: .8rem 0;
    font-size: 3rem;
    color: white;
    text-indent: .3rem;
  }
  .m-s{
    padding-bottom: 10rem;
  }
  .m-s ul{
    width: 100%;
  }
  .m-s ul li{
    color: black;
    font-size: 1.1rem;
    width: 94%;
    padding: 0.5rem 3%;
    margin: 0 auto;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
  }
  .m-s ul li p:nth-child(2) span{
    color: #999;
  }
  .art_list_right span{
    margin-left: 0.5rem;

  }
  .art_list_right span:last-child{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: url(../../static/img/setting_03.jpg) no-repeat;
    background-size: 100%;
    vertical-align: middle;
  }
  .art_list_left img{
    width: 1.6rem;
    margin-right: 0.5rem;
  }
  .m-s ul li:first-child{
    border-bottom: 1px solid #ddd;
  }
  .m-s ul li:nth-child(3){
    margin-top: 1rem;
    border-top: 1px solid #ddd;
  }
  .m-s ul li:nth-child(3) .art_list_right span:first-child{
    color: green;
  }
  .m-s ul li:nth-child(5) .art_list_left img,.m-s ul li:nth-child(6) .art_list_left img{
    height: 1.7rem;
    width: 1.7rem;
    margin-left: 0.3rem;
    margin-right: 0.8rem;
  }
  .b-bottom{
    width: 100%;
    text-align: center;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
  }
  .b-bottom span:first-child a,
  .b-bottom span:last-child a{
    font-size: .9rem;
    text-autospace: none;
    color: #596e96;
  }
  .b-bottom span{
    display: flex;
  }
  .b-bottom span:nth-child(2){
    display: block;
    width: 0.08rem;
    height: .9rem;
    background:  #596e96;
    margin: 0 .3rem;

  }
</style>
